// 填空题
import React, { useState } from "react";

import { StyleSheet, Text, View, TextInput } from "react-native";

const ShowCompletion = ({ number, QuesContent, isEdit, flag, editAnswer }) => {
  // console.log("展示填空题---", QuesContent);
  const [answer, setAnswer] = useState(QuesContent.answer);

  let answer_flag = true; // 还没有答案
  let t_answer = [];
  if (!(typeof answer == "undefined")) {
    t_answer = answer;
    answer_flag = false;
    // console.log("填空题答案1---", t_answer);
  }

  // console.log("填空题答案---", t_answer, answer);
  // const QuesContent = {
  //   type: 1, // 2：单选题
  //   needAnswer: true,
  //   title: "调查点类型",
  // };
  let str = QuesContent.title;
  let titleData = [];
  let t_flag = 0;
  let temp = "";
  for (let i = 0; i < str.length; i++) {
    // console.log(i);
    if (str[i] != "*") {
      temp = temp + str[i];
      t_flag = 0;
      // console.log("!= ----", temp);
    } else if (str[i] == "*") {
      t_flag++;
    }
    if ((t_flag == 1 && i != 0) || (temp != "" && i == str.length - 1)) {
      titleData.push(temp);
      // console.log("falg==1 ---", temp);
      temp = "";
    } else if (t_flag == 2) {
      titleData.push("**");
      temp = "";
      t_flag = 0;
    }
  }
  // console.log(titleData);

  let answerIndex = -1;
  return (
    <View style={styles.borderView}>
      <View style={{ flexDirection: "row", marginBottom: 7 }}>
        {QuesContent.needAnswer ? (
          <Text style={{ color: "red", marginRight: 1, marginTop: 6 }}>* </Text>
        ) : null}
        <Text
          style={{
            fontWeight: "bold",
            color: "#000",
            fontSize: 15,
            marginTop: 6,
          }}
        >
          {number != "" ? number + ". " : ""}
        </Text>
        <View
          style={{ flexDirection: "row", flexWrap: "wrap", marginRight: 30 }}
        >
          {titleData.map((item, index) => {
            if (answer_flag) {
              t_answer.push("");
              setAnswer(t_answer);
            }
            // console.log("答案", t_answer, answer);
            if (item != "**") {
              let t_item = item.split("");
              // return (
              // <View
              //   key={index}
              //   style={{ flexDirection: "row", flexWrap: "wrap" }}
              // >
              return t_item.map((word, wordindex) => {
                return (
                  <Text
                    key={wordindex}
                    style={{
                      marginTop: 6,
                      fontWeight: "bold",
                      color: "#000",
                      fontSize: 15,
                    }}
                  >
                    {word}
                  </Text>
                );
              });
              // </View>
              // );
            } else if (item == "**") {
              // setAnswer([...answer, ""]);
              answerIndex++;
              return (
                // <View key={index}>
                <TextInput
                  key={answerIndex}
                  style={{
                    width: 100,
                    borderColor: "#ddd",
                    borderBottomWidth: 1,
                    borderRadius: 3,
                    paddingLeft: 7,
                    paddingRight: 7,
                    textAlign: "center",
                    marginLeft: 5,
                    marginRight: 5,
                  }}
                  multiline={true}
                  // maxLength={500}
                  value={t_answer[index]}
                  placeholder={"(" + (answerIndex + 1) + ")"}
                  editable={isEdit}
                  onChangeText={(text) => {
                    // setAnswer((preAnswer) => {
                    //   return preAnswer.map((item, itemIndex) => {
                    //     return answerIndex == itemIndex ? text : item;
                    //   });
                    // });
                    t_answer[index] = text;
                    setAnswer(t_answer);
                    // console.log("填空题的答案啊---", answer);
                    editAnswer(flag[0], flag[1], flag[2], {
                      answer: t_answer,
                      optionFlag: QuesContent.optionFlag,
                    });
                  }}
                ></TextInput>
                // </View>
              );
            }
          })}
        </View>
      </View>
      {/* <View>
        <TextInput
          style={styles.inputBox}
          multiline={true}
          // maxLength={500}
          value={answer}
          placeholder="请输入答案"
          editable={isEdit}
          onChangeText={(text) => {
            // setTitle(text);
            setAnswer(text);
            editAnswer(flag[0], flag[1], text);
          }}
        ></TextInput>
      </View> */}
    </View>
  );
};

const styles = StyleSheet.create({
  borderView: {
    paddingTop: 15,
    paddingLeft: 15,
    paddingRight: 15,
    // justifyContent: "center",
    // backgroundColor: "#eee",
    // height: "100%",
  },
  inputBox: {
    marginTop: 6,
    borderColor: "#ddd",
    borderWidth: 1,
    // height: 100,
    borderRadius: 3,
    padding: 10,
    paddingTop: 10,
    paddingBottom: 10,
    marginLeft: 5,
    marginRight: 5,
  },
});

export default ShowCompletion;
